<template>
  <div class="user-setting">
    <basic-container>
      <el-tabs tab-position="left"
               stretch
               style="height: 400px;">
        <el-tab-pane label="安全设置">
          <div class="user-setting__main">
            <div class="user-setting__title">安全设置</div>
            <div class="user-setting__item">
              <div class="user-setting__meta">
                <p class="title">
                  <i class="el-icon-user"></i>
                  账号安全
                </p>
                <p class="subtitle">更改当前账号密码</p>
              </div>
              <div class="user-setting__menu">
                <el-button size="small" @click.native="updatePassword">修改</el-button>
              </div>
            </div>
            <div class="user-setting__item">
              <div class="user-setting__meta">
                <p class="title">
                  <i class="el-icon-mobile-phone"></i>
                  绑定手机
                </p>
                <p class="subtitle">设置您的绑定手机号码</p>
              </div>
              <div class="user-setting__menu">
                <el-button size="small" @click.native="isBindPhone=true">修改</el-button>
              </div>
            </div>
            <div class="user-setting__item">
              <div class="user-setting__meta">
                <p class="title">
                  <i class="el-icon-message"></i>
                  绑定邮箱
                </p>
                <p class="subtitle">设置您的绑定邮箱</p>
              </div>
              <div class="user-setting__menu">
                <el-button size="small" @click.native="isBindEmail=true">修改</el-button>
              </div>
            </div>
          </div>

        </el-tab-pane>
<!--        <el-tab-pane label="通知设置">-->
<!--          <div class="user-setting__main">-->
<!--            <div class="user-setting__title">通知设置</div>-->
<!--            <div class="user-setting__item">-->
<!--              <div class="user-setting__meta">-->
<!--                <p class="title">-->
<!--                  <i class="el-icon-document"></i>-->
<!--                  系统消息-->
<!--                </p>-->
<!--                <p class="subtitle">系统性的通知或者更新消息</p>-->
<!--              </div>-->
<!--              <div class="user-setting__menu">-->
<!--                <el-switch v-model="value">-->
<!--                </el-switch>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="user-setting__item">-->
<!--              <div class="user-setting__meta">-->
<!--                <p class="title">-->
<!--                  <i class="el-icon-user"></i>-->
<!--                  帐号消息-->
<!--                </p>-->
<!--                <p class="subtitle">帐号变更的通知消息</p>-->
<!--              </div>-->
<!--              <div class="user-setting__menu">-->
<!--                <el-switch v-model="value">-->
<!--                </el-switch>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-tab-pane>-->
      </el-tabs>
    </basic-container>

    <el-dialog class="avue-dialog" append-to-body title="绑定手机" :visible.sync="isBindPhone" width="30%">
      <el-form :model="phone" status-icon :rules="rulesPhone" ref="phone" size="small" label-width="100px">
        <el-form-item label="手机号" prop="phone">
          <el-input type="text" v-model="phone.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <avue-input type="text" v-model="phone.code" autocomplete="off" append="发送验证码" appendClick="handlePhone"></avue-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlePhone">提交</el-button>
          <el-button @click="isBindPhone=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog class="avue-dialog" append-to-body title="绑定邮箱" :visible.sync="isBindEmail" width="30%">
      <el-form :model="email" status-icon :rules="rulesEmail" ref="email" size="small" label-width="100px">
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="email.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input type="email" v-model="email.code" autocomplete="off" append="发送验证码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEmail">提交</el-button>
          <el-button @click="isBindEmail=false">取消</el-button>
        </el-form-item>
      </el-form>
<!--      <avue-login :option="option2" @submit="submit" @send="send">-->
<!--      </avue-login>-->
    </el-dialog>
  </div>
</template>

<script>
import {
  validMobile, validEmail
} from '@/util/validate';
export default {
  data () {
    return {
      value: true,
      // option2: {
      //   time: 60,
      //   codeType: 'phone',
      //   column: {
      //     username: {
      //       label: '手机号',
      //       prefixIcon: 'el-icon-mobile-phone',
      //       placeholder: '手机号/邮箱/用户名',
      //       autocomplete: 'off',
      //       rules: { required: true, message: '请输入手机号', trigger: 'blur' }
      //     },
      //     password: {
      //       hide: true,
      //     },
      //     code: {
      //       label: '验证码',
      //       autocomplete: 'off',
      //       rules: { required: true, message: '请输验证码', trigger: 'blur' }
      //     }
      //   },
      //   button : [
      //     {
      //       text: 'asd'
      //     }
      //   ]
      // },
      phone: {
        phone: '',
        code: '',
      },
      rulesPhone: {
        phone: [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          }
          ,{
            validator: validMobile,
            trigger: 'change',
          }
        ],
        code: [
          {
            required: true,
            message: '验证码不能为空',
            trigger: 'blur'
          }
        ]
      },
      email: {
        email: '',
        code: '',
      },
      rulesEmail: {
        email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: 'blur'
          }
          ,{
            validator: validEmail,
            trigger: 'change',
          }
        ],
        code: [
          {
            required: true,
            message: '验证码不能为空',
            trigger: 'blur'
          }
        ]
      },
      isBindPhone: false,
      isBindEmail: false
    }
  },
  methods: {
    updatePassword() {
      this.$store.commit('SET_ISUPDATEPASSWORD', true);
    },
    handlePhone(){
      this.$refs.phone.validate((valid) => {
        if (valid) {
          this.$message.warning("演示环境不支持修改");
          this.isBindPhone=false;
        }
      });
    },
    handleEmail() {
      this.$refs.email.validate((valid) => {
        if (valid) {
          this.$message.warning("演示环境不支持修改");
          this.isBindEmail=false;
        }
      });
    }
  }
}
</script>

<style lang="scss">
.user-setting {
  &__main {
    padding: 8px 40px;
  }
  &__item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }
  &__title {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 12px;
  }
  &__meta {
    flex: 1;
    .title {
      margin: 6px 0;
      font-weight: 700;
      font-size: 14px;
    }
    .subtitle {
      margin: 8px 0;
      font-size: 14px;
      color: #555;
    }
  }
}
</style>
